<template>
  <div class="Dachu" @scroll="changeScroll">
    <div class="nav">
      <router-link :to="{ name: 'LiveView' }" @click.native="changeCurrent"
      :class="{'Active':Active=='/painter/'}"
        >大触直播</router-link
      >
      <router-link :to="{ name: 'TalkView' }" @click.native="changeCurrent"
      :class="{'Active':Active=='/painter/talk'}"
        >大触专访</router-link
      >
      <router-link :to="{ name: 'ProductView' }" @click.native="changeCurrent"
       :class="{'Active':Active=='/painter/product'}"
        >大触周边</router-link
      >
    </div>

    <router-view></router-view>
    <div class="loading" v-if="isloading">正在加载中...</div>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
import request from "@/utils/request";
export default {
  name: "PainterView",

  data() {
    return {
      livelist: [],
      page: 1,
      talklist: [],
      isloading: false,
      Active: "/painter/",
    };
  },

  mounted() {},

  methods: {
    changeScroll(e) {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        this.isloading = true;
        this.page++;
        request(
          `https://m.lanqb.com/api/daniu?link=paging&live=3&heat=N&page=${this.page}`
        ).then((data) => {
          this.livelist = data.course.data;
          PubSub.publish("loding", this.livelist);
        });
        request(
          `https://m.lanqb.com/api/daniu/interview?link=paging&type=interview&page=${this.page}`
        ).then((data) => {
          this.talklist = [...this.talklist, ...data.data];
          PubSub.publish("load", this.talklist);
        });
        this.isloading = false;
      }
    },
    changeCurrent() {
      // console.log(this.$route.name);
      this.Active=this.$route.path;
    },
  },
};
</script>

<style lang="scss" scoped>
.Active{
  position: relative;
  color: #0395e4;
  &::after{
    content: "";
    position: absolute;
    left: 26px;
    bottom: 0;
    width: 25px;
    height: 3px;
    background: #0395e4;
  }
}
.Dachu {
  // background-color: gray;
  position: relative;
  width: 100vw;
  height: 83vh;
  overflow-y: scroll;
  .nav {
    width: 100vw;
    height: 45px;
    line-height: 45px;
    @include flex-around;
    text-align: center;
    font-size: 18px;
  }
  .loading {
    position: fixed;
    left: 154px;
    top: 115px;
  }
}
</style>
